<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面仿滚动</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .box{
            /*border:1px solid black;*/
            width: 300px;
            height: 300px;
            padding:0 18px 0 0;
            position: relative;
            margin:100px auto;
            overflow: hidden;
        }
        
        .scroll{
            position: absolute;
            right:0;
            top: 0;
            width: 18px;
            height: 100%;
            background-color: #ccc;
        }

        .content{
            position: relative;
            top: 0;
            left:0;
        }

        .bar{
            width: 100%;
            height:20px;
            background-color: red;
            cursor: pointer;
            position: absolute;
            top: 0;
            left: 0;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="content">
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
            这是一串内容
        </div>
        <div class="scroll">
            <div class="bar"></div>
        </div>
    </div>
</body>
</html>

<script>
    var box = document.getElementsByClassName("box")[0];
    var content = box.children[0];
    var scroll = box.children[1];
    var bar = scroll.children[0];

    //确定bar的高度  计算比例
    var scale = box.offsetHeight / content.offsetHeight;
    if(scale>1){
        bar.style.height = box.offsetHeight+'px';
    }else {
        bar.style.height = scroll.offsetHeight*scale+'px';

        bar.onmousedown = function (event) {
            var that = this;
            var event = event || window.event;
            var t = event.clientY - that.offsetTop ;

            document.onmousemove = function (e) {
                var event = e || window.event;
                var x = event.clientY - t;
                if (x<0){
                    x = 0;
                }
                if (x>that.offsetParent.offsetHeight - that.offsetHeight){
                    x = that.offsetParent.offsetHeight - that.offsetHeight;
                }
                bar.style.top = x + "px";
                content.style.top =- (content.offsetHeight - box.offsetHeight)/(box.offsetHeight - that.offsetHeight) * x + 'px';
                window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty();
            }

            document.onmouseup = function () {
                document.onmousemove = null;
            }
        }



    }


</script>